<template>
    <header>
        <div class="headContainer">
            <div class="blogName">听闻远方有你</div>
            <!-- 外链 -->
            <ul class="flex sel">
                <li>
                    <a href="/">首页</a>
                </li>
                <li>
                    <a href="https://juejin.cn/user/1834441468557735/posts">掘金</a>
                </li>
                <li>
                    <a href="https://gitee.com/yjsdszz">Gitte</a>
                </li>
                <li>
                    <a href="https://leetcode.cn/u/ting-wen-yuan-fang-you-ni-9/">LeetCode</a>
                </li>
            </ul>
            <!-- 搜索 -->
            <div class="searchArticle">
                <el-col :span="12">
                    <el-autocomplete v-model="state1" :fetch-suggestions="querySearch" clearable
                        class="inline-input w-50" placeholder="Please Input" @select="handleSelect" />
                </el-col>
            </div>
            <!-- 消息 -->
            <div class="message" v-if="token">
                <div class="hover">
                    <el-badge :value="''" :max="99" class="item">
                        <span>点赞</span>
                    </el-badge>

                </div>
                <div class="hover">
                    <el-badge :value="''" :max="99" class="item">
                        <span>评论</span>
                    </el-badge>

                </div>

            </div>
            <router-link class="f" to="/Write" v-show="isAdmin">写文章</router-link>
            <!-- 头像 -->
            <div class="avatar" v-if="token">
                <div class="welcome">下午好，{{ userStore.userName }}</div>
                <el-menu class="el-menu-vertical-demo" :collapse="true">
                    <el-sub-menu index="1">
                        <template #title>
                            <el-icon>
                                <img class="avatar-img" src="../assets/image/boy1.jpeg" alt="">
                            </el-icon>
                        </template>
                        <el-menu-item-group class="select">
                            <el-menu-item index="1">修改密码</el-menu-item>
                            <el-menu-item index="2" @click="exit">退出登录</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>

                </el-menu>
            </div>
            <!-- 登录、注册 -->
            <div class="loginBtn flex-gap" v-else>
                <span @click="showPop(true, true)">登录</span>
                <span @click="showPop(false, true)">注册</span>
            </div>
            <div class="dialog">
                <loginVue></loginVue>
            </div>
        </div>
    </header>
</template>

<script lang="ts" setup>
import { computed, Ref, onMounted, ref } from 'vue'
import { useUserStore } from '../store/user'
import loginVue from './login.vue';

const userStore = useUserStore()

let token = computed(() => userStore.token)
let isAdmin = computed(() => userStore.isAdmin)

//退出登录
const exit = (): void => {
    userStore.setToken('')
    userStore.showCreate(false)
}

interface RestaurantItem {
    value: string
    link: string
}

const state1: Ref<string> = ref('')

const restaurants = ref<RestaurantItem[]>([])

const querySearch = (queryString: string, cb: any) => {
    const results = queryString
        ? restaurants.value.filter(createFilter(queryString))
        : restaurants.value
    // call callback function to return suggestions
    cb(results)
}
const createFilter = (queryString: string) => {
    return (restaurant: RestaurantItem) => {
        return (
            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        )
    }
}
const loadAll = () => {
    return [
        { value: 'vue', link: 'https://github.com/vuejs/vue' },
        { value: 'element', link: 'https://github.com/ElemeFE/element' },
        { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
        { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
        { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
        { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
        { value: 'babel', link: 'https://github.com/babel/babel' },
    ]
}

const handleSelect = (item: RestaurantItem) => {
    console.log(item)
}

const showPop = (type: boolean, bool: boolean) => {
    userStore.showPop(type, bool)
}
onMounted(() => {
    restaurants.value = loadAll()
})
</script>

<style scoped>
header {
    width: 100%;
    background-image: linear-gradient(to bottom, rgb(68, 74, 59)20%, rgb(236, 245, 237));
}

.headContainer {
    width: 1400px;
    margin: 0 auto;
    height: 65px;
    color: rgb(255, 255, 255);
    font-weight: 700;
}

.headContainer {
    display: flex;
    align-items: center;
    position: relative;
}

.blogName {
    margin: 0 10px;
    font-size: 20px;
}

.sel {
    display: flex;
    text-align: center;
    align-items: center;
    margin-left: 10px;
    margin-right: 30px;
}

.sel li {
    width: 60px;
}

.sel li:last-child {
    margin-left: 10px;
}

.sel a {
    font-weight: 400;
    color: rgb(255, 255, 255);
}

.sel a:hover {
    color: rgb(6, 159, 206);
    font-weight: 500;
    font-size: 16px;
    transition: 0.4s;
}

.searchArticle {
    margin-left: 20px;
    width: 250px;
}

.f {
    color: aliceblue;
}

.avatar,
.loginBtn {
    display: flex;
    width: 200px;
    position: absolute;
    right: -40px;
}

.welcome {
    width: 100px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.avatar-img {
    width: 65px;
    height: 65px;
}

.message {
    width: 160px;
    margin-left: 150px;
    display: flex;
    justify-content: space-evenly;
}

.hover,
.blogName,
.avatar,
.select,
.welcome,
.loginBtn {
    user-select: none;
}

.hover:hover,
.loginBtn span {
    cursor: pointer;
}
</style>

<style>
.el-input {
    width: 200px;
}

.el-pagination {
    position: absolute;
}

.el-dialog__body {
    padding-top: 20px;
}
</style>